<template>

    <el-container class="totalcomtainer">
      <el-header>         <Navbar></Navbar> </el-header>
      <el-container class="maincontainer">

        <el-aside class="aside" :class="collapsed?'logo-collapse-width':'logo-width' ">

          <SidebarTwo></SidebarTwo>
        </el-aside>
        <el-main>

          <div v-if="navigateDate.length !=0 && getPath() != '/index'">
              <el-row :gutter="20">
                  <el-col :span="3" class="grid-content bg-purple" v-for="(navigateindex,index) in navigateDate.length>=8 ? 8:navigateDate.length" :key="index">
                    <span><a :href="navigateDate[navigateindex].url" target="_blank">{{navigateDate[navigateindex].name}}</a></span>

                  </el-col>


              </el-row>


          </div>

          <Mainpage></Mainpage>
        </el-main>
      </el-container>

    </el-container>
</template>

<script>
  import Mainpage from "@/views/layout/MainPage"
  import Navbar from "@/views/layout/Navbar"
  import {mapState} from "vuex"
  import SidebarTwo from "./layout/SidebarTwo"
  import { mapGetters } from 'vuex'
    export default {
        name: "Home",
      data(){
          return{
           // collapsed : this.state.collapsed,
          //  collapsed: false
          }
      },

      components:{
        Mainpage,
        Navbar,

        SidebarTwo
      },
      methods:{
          getPath(){
             // console.log(this.$route.name)
            return this.$route.path

          }
      },
      created() {

      },
      computed:{
        /*...mapState({
          collapsed : state=> state.manager.collapsed
        }),*/
        ...mapGetters([
          'collapsed'
        ]),
        ...mapGetters([
          'navigateDate'
        ])

      }


    }
</script>

<style scoped lang="scss">
  .totalcomtainer{
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .maincontainer{
    height: 100%;
  }
  .aside{
    height: 100%;
    background: #eef1f6;
    transition:width 0.5s;
    transition-timing-function:linear;
    /* Firefox 4 */
    -moz-transition:width 0.5s;
    -moz-transition-timing-function:linear;
    /* Safari and Chrome */
    -webkit-transition:width 0.5s;
    -webkit-transition-timing-function:linear;
    /* Opera */
    -o-transition:width 0.5s;
    -o-transition-timing-function:linear;
  }
  .el-header{
    padding: 0;
  }
 .logo-width{
      width:230px !important;
    }
  .logo-collapse-width{
    width:60px !important;
  }



  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 24px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
